import Vue from 'vue'

new Vue({
    el:'#root',
    template: `
        <div>
            <div v-text="text" v-once v-pre></div>
            <div v-html="html" @click=""></div>
            <div v-show="active">v-show只是改变display样式</div>
            <div v-if="active">v-if动态增删节点，性能降低，重绘</div>
            <div v-else>v-else</div>
            <ul>
                <li v-for="(item,index) in arr" :key="index">{{item}} : {{index}}</li>
            </ul>
            <ul>
                <li v-for="(val,key,index) in obj">{{key}} : {{val}} : {{index}}</li>
            </ul>
            <input type="checkbox" v-model="active">
            <div>
                <input type="checkbox" :value="2" v-model="arr">
                <input type="checkbox" :value="1" v-model="arr">
                <input type="checkbox" :value="3" v-model="arr">
            </div>
            <div>
                <input type="radio" value="one" v-model="picked"/>
                <input type="radio" value="two" v-model="picked"/>
            </div>
            <div>
                <input type="text" v-model.number="text"/>
                <input type="text" v-model.trim="text"/>
                <input type="text" v-model.lazy="text"/>
            </div>
        </div>
    `,
    data: {
        text: 0,
        html: "<span>this is html</span>",
        active: true,
        arr: [2,3],
        obj: {
            a: 123,
            b: 456,
            c: 789
        },
        picked: ''
    }
})